<template>
  <div>
    <div class="title-style">家庭成员信息</div>
<!--    <h3>家庭成员信息</h3>-->
<!--    <Divider style="margin: 5px;" />-->
    <Table v-if="!tableLoading" :columns="columns" :data="dataList">
      <template slot-scope="{ row }" slot="subsidy_type">
        <span v-if="row.subsidy_type === '110'">农村低保</span>
        <span v-if="row.subsidy_type === '120'">城市低保</span>
        <span v-if="row.subsidy_type === '140'">特困人员供养（农村）</span>
        <span v-if="row.subsidy_type === '150'">特困人员供养（城市）</span>
        <span v-if="row.subsidy_type === '610'">低保边缘家庭（城市）</span>
        <span v-if="row.subsidy_type === '620'">低保边缘家庭（农村）</span>
        <span v-if="row.subsidy_type === '' || row.subsidy_type === undefined">非保障人员</span>
      </template>

      <template  slot-scope="{ row, index }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="updateFamilyinfo(row, index)">编辑</Button>
        <Button type="error" size="small" @click="removeFamilyinfo(row)">删除</Button>
      </template>
    </Table>
    <Button :disabled="paramsData.operation === '2'" style="width: 90%; margin: 10px 5%;" type="dashed" @click="addFamily">添加成员</Button>
<!--    <Divider style="margin: 10px 0" />-->
    <Modal v-model="familyModal" width="1000">
      <div>
        <Form :model="paramData">
          <Row :gutter="24">
            <Col span="12">
              <FormItem>
                <template #label>
                  <span>添&ensp;加&ensp;&ensp;类&ensp;型：</span>
                </template>
                <RadioGroup v-model="paramData.is_subsidy" @on-change="familyType = true">
                  <Radio :label="'1'">保障人员</Radio>
                  <Radio :label="'0'">非保障人员</Radio>
                </RadioGroup>
              </FormItem>
            </Col>
            <Col span="12" v-if="paramData.is_subsidy === '1'">
              <FormItem>
                <template #label>
                  <span style="color: red">*</span><span>救&ensp;助&ensp;&ensp;类&ensp;型：</span>
                </template>
                <RadioGroup v-model="paramData.subsidy_state">
<!--                  <Radio :label="'0'">非特困人员</Radio>-->
<!--                  <Radio :label="'1'">特困人员</Radio>-->
                  <Radio :label="'1'">低保</Radio>
                  <Radio :label="'2'">特困</Radio>
                  <Radio :label="'3'">低保边缘家庭</Radio>
                </RadioGroup>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="24">
            <Col span="12">
              <FormItem>
                <template #label>
                  <span v-if="paramData.is_subsidy === '0'" style="color: red">*</span><span>&ensp;姓&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;名&ensp;：</span>
                </template>
                <input class="familyClass" v-model="paramData.name" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))" />
<!--                <Input v-model="paramData.name" style="width: 320px" />-->
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem>
                <template #label>
                  <span style="color: red">*</span><span>证&ensp;件&ensp;&ensp;号&ensp;码：</span>
                </template>
                <Input v-model="paramData.card_no" style="width: 320px"/>
              </FormItem>
            </Col>
          </Row>
          <div style="text-align: center" v-if="paramData.is_subsidy === '1' && familyType">
            <Button style="margin-right: 30px;width: 10%" @click="familyModal = false">取消</Button>
            <Button style="width: 10%" type="info" @click="searchInfo">查询</Button>
          </div>
        </Form>

        <Form :model="paramData" v-if="paramData.is_subsidy === '0' || !familyType">
          <Row :gutter="24">
            <Col span="12">
              <FormItem>
                <template #label>
                  <span style="color: red">*</span><span>&ensp;性&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;别&ensp;：</span>
                </template>
                <RadioGroup v-model="paramData.sex">
                  <Radio :disabled="!familyType" :label="'男'">男</Radio>
                  <Radio :disabled="!familyType" :label="'女'">女</Radio>
                </RadioGroup>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem>
                <template #label>
                  <span style="color: red">*</span><span>联&ensp;系&ensp;&ensp;电&ensp;话：</span>
                </template>
                <Input maxlength="11" v-model="paramData.mobile" style="width: 320px"/>
              </FormItem>
            </Col>
          </Row>

          <Row :gutter="24" v-if="paramData.is_subsidy === '1'">
            <Col span="12">
              <FormItem>
                <template #label>
                  <span>救&ensp;助&ensp;&ensp;类&ensp;型：</span>
                </template>
                <Select disabled v-model="paramData.subsidy_type"  style="width: 320px">
                  <Option :value="'110'">农村低保</Option>
                  <Option :value="'120'">城市低保</Option>
                  <Option :value="'140'">特困人员供养（农村）</Option>
                  <Option :value="'150'">特困人员供养（城市）</Option>
                  <Option :value="'610'">低保边缘家庭（城市）</Option>
                  <Option :value="'620'">低保边缘家庭（农村）</Option>
                  <Option :value="''">非保障人员</Option>
                </Select>
<!--                <Input :disabled="!familyType" v-model="paramData.subsidy_type"/>-->
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem>
                <template #label>
                  <span>救助证件号码：</span>
                </template>
                <Input :disabled="!familyType" v-model="paramData.subsidy_no" style="width: 320px"/>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="24">
            <Col span="12">
              <FormItem>
                <template #label>
                  <span>工&ensp;作&ensp;&ensp;单&ensp;位：</span>
                </template>
                <Input maxlength="30" :disabled="!familyType" v-model="paramData.work_address" style="width: 320px"/>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem>
                <template #label>
                  <span>与申请人关系：</span>
                </template>
                <Select filterable :loading="loading" v-model="paramData.sq_user_type" style="width:320px">
                  <Option v-for="item in relationList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
          <div style="text-align: center" v-if="paramData.is_subsidy === '0' || !familyType">
            <Button style="margin-right: 30px;width: 10%" @click="familyModal = false">取消</Button>
            <Button style="width: 10%" type="info" @click="AddTo">添加</Button>
          </div>
        </Form>

      </div>
      <div slot="footer">
<!--        <Button type="error" size="large" long :loading="modal_loading" @click="del">Delete</Button>-->
      </div>
    </Modal>

    <Modal v-model="updateModal" width="1000">
      <div>
        <Form :model="paramData">
          <Row :gutter="24">
            <Col span="12">
              <FormItem>
                <template #label>
                  <span>添&ensp;加&ensp;&ensp;类&ensp;型：</span>
                </template>
                <RadioGroup  v-model="paramData.is_subsidy">
                  <Radio disabled :label="'1'">保障人员</Radio>
                  <Radio disabled :label="'0'">非保障人员</Radio>
                </RadioGroup>
              </FormItem>
            </Col>
            <Col span="12" v-if="paramData.is_subsidy === '1'">
              <FormItem>
                <template #label>
                  <span style="color: red">*</span><span>救&ensp;助&ensp;&ensp;类&ensp;型：</span>
                </template>
                <RadioGroup v-model="paramData.subsidy_state">
                  <Radio :label="'1'">低保</Radio>
                  <Radio :label="'2'">特困</Radio>
                  <Radio :label="'3'">低保边缘家庭</Radio>
                </RadioGroup>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="24">
            <Col span="12">
              <FormItem>
                <template #label>
                  <span>&ensp;姓&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;名&ensp;：</span>
                </template>
                <Input disabled v-model="paramData.name" style="width: 320px"/>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem>
                <template #label>
                  <span style="color: red">*</span><span>证&ensp;件&ensp;&ensp;号&ensp;码：</span>
                </template>
                <Input disabled v-model="paramData.card_no" style="width: 320px"/>
              </FormItem>
            </Col>
          </Row>
<!--          <div style="text-align: center" v-if="paramData.is_subsidy === '1' && familyType">-->
<!--            <Button style="margin-right: 30px;width: 10%" @click="updateModalModal = false">取消</Button>-->
<!--            <Button style="width: 10%" type="info" @click="searchInfo">查询</Button>-->
<!--          </div>-->
        </Form>

        <Form :model="paramData" v-if="paramData.is_subsidy === '0' || !familyType">
          <Row :gutter="24">
            <Col span="12">
              <FormItem>
                <template #label>
                  <span style="color: red">*</span><span>&ensp;性&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;别&ensp;：</span>
                </template>
                <RadioGroup v-model="paramData.sex">
                  <Radio disabled :label="'男'">男</Radio>
                  <Radio disabled :label="'女'">女</Radio>
                </RadioGroup>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem>
                <template #label>
                  <span style="color: red">*</span><span>联&ensp;系&ensp;&ensp;电&ensp;话：</span>
                </template>
                <Input maxlength="11" v-model="paramData.mobile" style="width: 320px"/>
              </FormItem>
            </Col>
          </Row>

          <Row :gutter="24" v-if="paramData.is_subsidy === '1'">
            <Col span="12">
              <FormItem>
                <template #label>
                  <span>救&ensp;助&ensp;&ensp;类&ensp;型：</span>
                </template>
                <Select disabled v-model="paramData.subsidy_type"  style="width: 320px">
                  <Option :value="'110'">农村低保</Option>
                  <Option :value="'120'">城市低保</Option>
                  <Option :value="'140'">特困人员供养（农村）</Option>
                  <Option :value="'150'">特困人员供养（城市）</Option>
                  <Option :value="'610'">低保边缘家庭（城市）</Option>
                  <Option :value="'620'">低保边缘家庭（农村）</Option>
                  <Option :value="''">非保障人员</Option>
                </Select>
                <!--                <Input :disabled="!familyType" v-model="paramData.subsidy_type"/>-->
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem>
                <template #label>
                  <span>救助证件号码：</span>
                </template>
                <Input :disabled="!familyType" v-model="paramData.subsidy_no" style="width: 320px"/>
              </FormItem>
            </Col>
          </Row>

          <Row :gutter="24">
            <Col span="12">
              <FormItem>
                <template #label>
                  <span>工&ensp;作&ensp;&ensp;单&ensp;位：</span>
                </template>
                <Input maxlength="30" :disabled="paramData.is_subsidy !== '0'" v-model="paramData.work_address" style="width: 320px"/>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem>
                <template #label>
                  <span>与申请人关系：</span>
                </template>
                <Select filterable :loading="loading" v-model="paramData.sq_user_type" style="width: 320px">
                  <Option v-for="item in relationList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
          <div style="text-align: center" v-if="paramData.is_subsidy === '0' || !familyType">
            <Button style="margin-right: 30px;width: 10%" @click="updateModal = false">取消</Button>
            <Button style="width: 10%" type="info" @click="updateFamily">保存</Button>
          </div>
        </Form>

      </div>
      <div slot="footer">
        <!--        <Button type="error" size="large" long :loading="modal_loading" @click="del">Delete</Button>-->
      </div>
    </Modal>

    <Modal v-model="deleteModal" width="50%" @on-ok="deleteOK">
      <div style="text-align: center;color: red;font-size: 24px;">是否删除{{userInfo.name}}(证件号码: {{userInfo.card_no}})</div>
    </Modal>
  </div>
</template>
<script>
import { postCN } from '@/api/eventlist'
export default {
  props: {
    data: Array,
    paramsData: Object
  },
  data () {
    return {
      familyModal: false,
      updateModal: false,
      deleteModal: false,
      familyType: true,
      loading: false,
      tableLoading: false,
      paramData: {
        is_subsidy: '',
        subsidy_state: ''
      },
      formItem: {},
      userInfo: {},
      relationList: [
        // { value: '01', label: '本人' },
        { value: '10', label: '配偶' },
        { value: '20', label: '子/婿' },
        { value: '30', label: '女/媳' },
        { value: '40', label: '孙子女/外孙子女' },
        { value: '50', label: '父母/岳父母/公婆' },
        { value: '60', label: '祖父母/外祖父母' },
        { value: '70', label: '兄弟姐妹' },
        { value: '99', label: '其他' }
      ],
      dataList: [],
      columns: [
        { type: 'index', width: 60, align: 'center' },
        { title: '成员姓名', key: 'name', minWidth: 150, align: 'center' },
        { title: '身份证号', key: 'card_no', minWidth: 150, align: 'center' },
        { title: '性别', key: 'sex', minWidth: 100, align: 'center' },
        { title: '救助类型', slot: 'subsidy_type', minWidth: 150, align: 'center' },
        { title: '联系电话', key: 'mobile', minWidth: 150, align: 'center' },
        { title: '添加方式', key: 'insert_type', minWidth: 150, align: 'center' },
        { title: '添加人', key: 'insert_name', minWidth: 150, align: 'center' },
        { title: '操作', slot: 'action', minWidth: 150, align: 'center' }
      ]
    }
  },
  methods: {
    updateFamilyinfo (item, index) {
      if (this.paramsData.operation === '2') {
        return
      }
      if (item.insert_type === '系统获取') {
        this.familyType = false
      } else {
        this.familyType = true
      }
      this.paramData = this.$common.xeUtils.clone(item, true)
      if (this.subsidy_type) {
        this.paramData.subsidy_state = '1'
      } else {
        this.paramData.subsidy_state = '0'
      }
      this.paramData.index = index
      this.updateModal = true
    },
    removeFamilyinfo (item, index) {
      if (this.paramsData.operation === '2') {
        return
      }
      this.userInfo = this.$common.xeUtils.clone(item, true)
      this.userInfo.index = index
      this.deleteModal = true
    },
    addFamily () {
      console.log('添加家庭成员')
      this.paramData = {
        is_subsidy: '1',
        subsidy_state: '0',
        sex: '男'
      }
      this.familyType = true
      this.familyModal = true
    },
    searchInfo () {
      console.log('这是查询保障人员亲属的接口')
      if (!this.alidateIdCardNum(this.paramData.card_no)) {
        this.$Notice.error({
          title: '证件号码不合规',
          desc: ''
        })
        return
      }
      if (this.paramsData.person_card_no === this.paramData.card_no) {
        this.$Notice.error({
          title: '请填写家庭成员',
          desc: ''
        })
        return
      }
      if (this.paramData.is_subsidy === '1' && this.paramData.subsidy_state === '') {
        this.$Notice.error({
          title: '请选择救助类型',
          desc: ''
        })
        return
      }
      if (!this.paramData.card_no) {
        this.$Notice.error({
          title: '请填写证件号码',
          desc: ''
        })
        return
      }
      let data = {
        card_no: this.paramData.card_no,
        method: 'getUserFamilyMembers',
        type: '1',
        check: '0',
        subsidy_state: this.paramData.subsidy_state
      }
      postCN(data).then(res => {
        if (res.data.errcode === 0) {
          this.familyType = false
          let paramData = {
            mobile: res.data.data.AZDF0011,
            subsidy_type: res.data.data.user_type,
            subsidy_no: res.data.data.subsidy_no,
            sq_user_type: res.data.data.sq_user_type,
            name: res.data.data.name
          }
          if (parseInt(data.card_no.substr(16, 1)) % 2 === 1) {
            paramData.sex = '男'
          } else {
            paramData.sex = '女'
          }
          this.paramData = { ...this.paramData, ...paramData }
        } else if (res.data.errcode === 9997) {
          this.$Notice.error({
            title: '查询失败',
            desc: '1. 你所提交的用户信息已申请采暖补贴，请勿重复申请！<br>' +
              '2. 提醒说明：当前用户本人已申请过采暖补贴；当前用户所在家庭其他成员已申请过采暖补贴。'
          })
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: '系统中不存在当前用户\n' +
              '请确认【救助类型】和【添加类型】是否正确\n' +
              '请确认【身份证号】是否正确\n' +
              '可手动添加【非保障成员】'
          })
        }
      })
    },
    AddTo () {
      if (!this.alidateIdCardNum(this.paramData.card_no)) {
        this.$Notice.error({
          title: '证件号码不合规',
          desc: ''
        })
        return
      }
      if (!this.paramData.name) {
        this.$Notice.error({
          title: '请填写姓名',
          desc: ''
        })
        return
      }
      if (!this.paramData.mobile) {
        this.$Notice.error({
          title: '请填写联系电话',
          desc: ''
        })
        return
      }
      if (this.familyType) {
        this.paramData.insert_type = '手动添加'
        this.paramData.subsidy_type = ''
      } else {
        this.paramData.insert_type = '系统获取'
      }
      this.paramData.insert_name = this.companyName
      if (this.dataList.length > 0) {
        let that = this
        let card_no = ''
        that.dataList.forEach(function (item) {
          if (item.card_no === that.paramData.card_no) {
            card_no = item.card_no
          }
        })
        if (card_no === that.paramData.card_no) {
          that.$Notice.error({
            title: '添加失败',
            desc: '该成员已添加'
          })
          return
        }
      }
      this.dataList.push(this.paramData)
      this.familyIndex(this.dataList)
      this.familyModal = false
    },
    familyIndex (list) {
      let index = 0
      list.forEach(function (item) {
        if (item.is_subsidy === '0') {
          index = index + 1
        }
      })
      console.log(index, 'index')
      if (index !== 0) {
        this.$emit('familyLenght', '1')
      } else {
        this.$emit('familyLenght', '0')
      }
    },
    updateFamily () {
      this.tableLoading = true
      if (this.familyType) {
        this.paramData.insert_type = '手动添加'
        this.paramData.subsidy_type = ''
      } else {
        this.paramData.insert_type = '系统获取'
      }
      this.paramData.insert_name = this.companyName
      this.$set(this.dataList, this.paramData.index, this.paramData)
      this.familyIndex(this.dataList)
      this.updateModal = false
      this.tableLoading = false
    },
    deleteOK () {
      this.dataList.splice(this.userInfo.index, 1)
      this.familyIndex(this.dataList)
    },
    // 身份证校验
    alidateIdCardNum (idCardNum) {
      // 非法字符串
      if (typeof idCardNum !== 'string') return false
      // 所有身份证前两位代表的是地区
      const city = { 11: '北京', 12: '天津', 13: '河北', 14: '山西', 15: '内蒙古', 21: '辽宁', 22: '吉林', 23: '黑龙江 ', 31: '上海', 32: '江苏', 33: '浙江', 34: '安徽', 35: '福建', 36: '江西', 37: '山东', 41: '河南', 42: '湖北 ', 43: '湖南', 44: '广东', 45: '广西', 46: '海南', 50: '重庆', 51: '四川', 52: '贵州', 53: '云南', 54: '西藏 ', 61: '陕西', 62: '甘肃', 63: '青海', 64: '宁夏', 65: '新疆', 71: '台湾', 81: '香港', 82: '澳门', 91: '国外' }
      const birthday = idCardNum.substr(6, 4) + '/' + Number(idCardNum.substr(10, 2)) + '/' + Number(idCardNum.substr(12, 2))
      const d = new Date(birthday)
      const newBirthday = d.getFullYear() + '/' + Number(d.getMonth() + 1) + '/' + Number(d.getDate())
      const currentTime = new Date().getTime()
      const time = d.getTime()
      // 身份证系数列表
      const arrInt = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
      // 设定身份证通过相加运算得到值对应的身份证最后一位的列表
      const arrCh = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']
      let sum = 0
      // 非法身份证
      if (!/^\d{17}(\d|x)$/i.test(idCardNum)) return false
      // 非法地区 非法地区
      if (city[idCardNum.substr(0, 2)] === undefined) return false
      // 非法生日
      if (time >= currentTime || birthday !== newBirthday) return false

      // 计算当前身份证最后一位的值
      for (let i = 0; i < 17; i++) {
        sum += idCardNum.substr(i, 1) * arrInt[i]
      }

      const residue = arrCh[sum % 11]
      // 非法身份证哦
      if (residue !== idCardNum.substr(17, 1)) return false

      return true
    }
  },
  mounted () {
    this.dataList = this.data
  },
  computed: {
    companyName () {
      return this.$store.state.user.severUserInfo.name
    }
  }
}
</script>
<style>
.title-style {
  padding: 8px 12px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  margin: 15px 0;
  font-size: 16px;
  width: 100%;
}
.familyClass {
  display: inline-block;
  width: 320px;
  height: 32px;
  line-height: 1.5;
  padding: 4px 7px;
  font-size: 12px;
  border: 1px solid #dcdee2;
  border-radius: 4px;
  color: #515a6e;
  background-color: #fff;
  background-image: none;
  position: relative;
  cursor: text;
  -webkit-transition: border 0.2s ease-in-out, background 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
  transition: border 0.2s ease-in-out, background 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
  transition: border 0.2s ease-in-out, background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  transition: border 0.2s ease-in-out, background 0.2s ease-in-out, box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
  top: 1.5px;
}
.familyClass:hover {
  border-color: #57a3f3;
}
</style>
